<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>左栏</title>
        <link rel="stylesheet" href="css/sidebar.css" />
        <style>
            div{
                width: 300px;
                height: 300px;
            }
            div.taiyi{
                background: url(../Day03/img/3.png);
                background-size: 100% 100%;
                position: absolute;
                /* 堆叠属性：必须存在相对或者绝对定位情况下，z-index堆叠属性：属性值：9999内 */
                z-index: 999;
            }
            div.shengongbao{
                background: url(../Day03/img/1.png);
                background-size: 100% 100%;
                position: absolute;
                z-index: 1000;
            }
        </style>
    </head>
    <body>
        <!-- 左栏：左栏弹窗功能 
          语义化元素---div功能一致【有宽没高区域】
          div起名---不利于SEO优化
          涵盖名称---有利于SEO优化
          建议：搭建页面结构，固定功能：左栏、主区域、导航栏..
               使用语义化元素
               article元素：独立的内容区域块，存储：新闻、博客区域、左栏弹出的功能栏！
        -->
        <article>
            <ul class="sidebar">
				<!-- 左栏弹出框：找到无序列表第一个li上，div起名outer -->
                <div class="outer"></div>
				<li>lorem1
				<span>></span></li>
                <li>lorem2
				<span>></span></li>
                <li>lorem3
				<span>></span></li>
                <li>lorem4
				<span>></span></li>
                <li>lorem5
				<span>></span></li>
                <li>lorem6
				<span>></span></li>
                <li>lorem7
				<span>></span></li>
                <li>lorem8
				<span>></span></li>
                <li>lorem9
				<span>></span></li>
                <li>lorem10
				<span>></span></li>
            </ul>
        </article>
        
        
        
        
        <!-- 相对定位与绝对定位，页面弹出功能 
             相对定位：position:relative,使用率高：相对于父级元素定位、元素存在于文档流中
             绝对定位：position:absolute,使用率较高：存在父级，按照父级定位，没有父级按照，
                     网页左上角位置进行定位，元素脱离文档流！
             堆叠问题：z-index属性：属性值，属性值越大，越靠前！
             根据相对定位与绝对定位